<template>
  <div class="table-container">
    <el-table :data="eventtableData"
              border
              class="mtable">
      <el-table-column v-for="(item, key) in tableheader"
                       :key="key"
                       :prop="item.prop"
                       :label="item.label"
                       align="center">
        <template slot-scope="scope">
          <el-checkbox v-if="scope.$index === 0"
                       v-model="checksearch"
                       :label="key">{{cb}} </el-checkbox>
          <span style="margin-left: 10px">{{ scope.row[item.prop]}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'eventTable',
  props: {
    eventtableData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      cb: ' ',
      tableheader: [
        {
          label: '失压总次数',
          prop: 'syzcs'
        },
        {
          label: '失压总累计时间',
          prop: 'syzljsj'
        },
        {
          label: '最近1次失压发生时刻',
          prop: 'zj1csyfssk'
        },
        {
          label: '最近1次失压结束时刻',
          prop: 'zj1csyjssk'
        },
        {
          label: 'A相失压总次数',
          prop: 'axsyzcs'
        },
        {
          label: 'A相失压总累计时间',
          prop: 'axsyzljsj'
        },
        {
          label: 'B相失压总次数',
          prop: 'bxsyzcs'
        },
        {
          label: 'B相失压总累计时间',
          prop: 'bxsyzljsj'
        },
        {
          label: 'C相失压总次数',
          prop: 'cxsyzcs'
        },
        {
          label: 'C相失压总累计时间',
          prop: 'cxsyzljsj'
        },
        {
          label: '开表盖总次数',
          prop: 'kbjzcs'
        }
      ],
      checksearch: []
    }
  }
}
</script>

<style lang="scss">
.mtable {
  display: flex !important;
  flex-direction: row !important;
  .el-table__header-wrapper {
    display: inline-block;
    width: 21.875rem /* 350/16 */;
    th {
      width: 21.875rem /* 350/16 */;
    }
  }
  .el-table__body-wrapper {
    display: inline-block;
    width: calc(100% - 21.875rem);
    .el-table__body {
      width: 100% !important;
      tbody {
        display: block;
        width: 100%;

        tr {
          width: 90%;
          td {
            width: 100%;
          }
        }
        tr:nth-of-type(1) {
          width: 10%;
        }
      }
    }
    .el-table__empty-block {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
    }
  }
  table {
    display: block;
    position: relative;
    width: 100%;
  }
  thead {
    float: left;
  }

  tbody tr {
    display: inline-block;
  }

  th,
  td {
    display: block;
    height: 45px;
  }
}
</style>
